<template>
  <div class="chart" ref="chart">
    <div v-if="widgetData.value.bgImg !== ''" class="titleBox">
      <div class="img"><img :src="widgetData.value.bgImg"></div>
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div v-else class="titleBox">
      <div class="title"><span>{{ widgetData.value.title }}</span></div>
    </div>
    <div :style="{ width: w + 'px', height: (h - 40) + 'px' }" id="barChartX"></div>
  </div>
</template>

<script>
export default {
  components: {},
  props: ['widgetData'],
  computed: {
    w() {
      let width = parseInt(this.widgetData.style.w / 4 * 3);
      return width
    },
    h() {
      let height = parseInt(this.widgetData.style.h / 4 * 3);
      return height
    }
  },
  data() {
    return {
      chartData: this.widgetData.value.chartData,
    }
  },
  watch: {},
  created() { },
  mounted() {
    this.getEchart();
  },
  methods: {
    getEchart() {
      let chartDom = document.getElementById("barChartX");
      let chart = this.$echarts.init(chartDom);
      console.log('图表数据', this.chartData);

      const xData = this.chartData.xData;
      const yData1 = this.chartData.yData1;
      const yData2 = this.chartData.yData2;
      const yData3 = this.chartData.yData3;

      let option = {
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            color: "#fff",
          },
          backgroundColor: "rgba(16, 123, 184, .52)", //设置背景颜色
          borderColor: "rgba(255, 255, 255, 0)",
          confine: false,
          formatter: "{b}: {c}",
        },
        grid: {
          left: "5%",
          right: "5%",
          top: "5%",
          bottom: "0%", // 特殊
          containLabel: true,
        },
        xAxis: [
          {
            type: "value",
            show: false,
          },
          {
            type: "value",
            show: false,
          },
        ],
        yAxis: [
          {
            type: "category",
            splitNumber: 5,
            inverse: true,
            tooltip: {
              show: true
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: true,
            },
            data: xData,
            axisLabel: {
              show: true,
              margin: 0,
              padding: [10, 10, 8, 0],
              formatter: (name) => {
                return `{nameStyle|${name}}`;
              },
              rich: {
                nameStyle: {
                  fontFamily: 'SourceHanSansSC',
                  fontWeight: 400,
                  fontSize: 14,
                  color: "#899DBF",
                },
              },
            },
          },
          {
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            axisLabel: {
              margin: 0,
              padding: [0, 0, 0, 10],
              formatter: function (value) {
                return `{nameStyle|${value}}`;
              },
              rich: {
                nameStyle: {
                  fontSize: 20,
                  color: '#85EDFB',
                },
              },
            },
            data: yData1,
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: 10, // 柱子宽度
            MaxSize: 0,
            showBackground: true,
            backgroundStyle: {
              color: "rgb(17,54,98)",
            },
            itemStyle: {
              color: params => {
                if (params.dataIndex === 0) {
                  return (new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "RGBA(50,119,226, 0.7)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "RGBA(87,177,238, 1)" // 100% 处的颜色
                  }], false))
                }
                if (params.dataIndex === 1) {
                  return (new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "RGBA(63,58,171, 0.7)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "RGBA(96,86,193, 1)" // 100% 处的颜色
                  }], false))
                }
                if (params.dataIndex === 2) {
                  return (new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "RGBA(142,200,148, 0.7)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "RGBA(97,174,100, 1)" // 100% 处的颜色
                  }], false))
                }
                if (params.dataIndex === 3) {
                  return (new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                    offset: 0,
                    color: "RGBA(229,240,70, 0.7)" // 0% 处的颜色
                  }, {
                    offset: 1,
                    color: "RGBA(232,247,5, 1)" // 100% 处的颜色
                  }], false))
                }
                return (new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                  offset: 0,
                  color: "RGBA(240,59,72, 0.7)" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "RGBA(250,3,21, 1)" // 100% 处的颜色
                }], false))
              }
            },
            data: yData1,
          },
        ],
      }

      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
      // chart.setOption(option);
      // 动态显示值
      if (option && typeof option === "object") {
        chart.setOption(option, true);
        let i1 = 0; //播放所在下标
        let mTime = setInterval(function () {
          chart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: i1,
          });
          i1++;
          if (i1 >= xData.length) {
            i1 = 0;
          }
        }, 2600);
      };
    }
  },
}
</script>

<style lang="scss" scoped>
.chart {
  width: 100%;
  height: 100%;

  span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .titleBox {
    width: 100%;
    height: 40px;
    position: relative;

    .img {
      width: 100%;
      height: 40px;
      position: absolute;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      position: absolute;
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 13px;
      font-size: 18px;
      color: #FFFFFF;
      background-color: #000;
    }

    .el-icon-picture {
      width: 100%;
      height: 40px;
      position: absolute;
      font-size: 3.125rem;
      background: #ffffff;
      color: #c1c1c1;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>